import React, { FC } from 'react';

import './index.less';

import { ReactComponent as IconHome } from './icon-home.svg';

const SubmenuNav = (props: { appMenus: any }) => {

    const { appMenus } = props;
    console.log(appMenus)

    // 子应用信息
    const [hasSubmenu, setHasSubmenu] = React.useState(true);

    /**
       * 点击获取子应用菜单
       * @param app
       */
    const getSubMenu = async (app: any) => {
        console.log("子菜单")
    };

    return <>
        <div className='submenu-nav'>
            <h2>{appMenus?.menuName}</h2>
            <ul>
                {appMenus?.children?.map((item) => (
                    <li onClick={getSubMenu}>
                        <IconHome /><span className='words'>{item?.menuName}</span>
                        <i className='corner-top'></i>
                        <i className='corner-bottom'></i>
                    </li>
                ))}
            </ul>
        </div>;
        {
        // 判断是否有菜单
        hasSubmenu?(
        <SubmenuLinks />): null}
    </>
};

const SubmenuLinks = () => {
    return <div className='submenu-links'>
        <ul>
            <li className='active'>商品库</li>
            <li>商品分类</li>
            <li>评价管理</li>
            <li>服务保障</li>
            <li>库存预警</li>
            <li>补货记录</li>
        </ul>
    </div>
}

interface SubmenuProps {
    appMenus: any;
}

const Submenu: FC<SubmenuProps> = ({ appMenus }) => {

    console.log(appMenus)

    return <div className="submenu">
        <SubmenuNav appMenus={appMenus} />
    </div>
}

export default Submenu;